<!-- 话题列表  分页 -->
<!-- 页面需引入layer.js 和 DPlayer -->

<div class="topicModule" xmlns:th="http://www.thymeleaf.org">
    <div class="topic-box">
        <div class="topicList" th:each="topic:${topic}">
            <div class="topicItem">
                <div class="avatarBox">
                    <a class="avatarLink" th:href="@{'/user/control/home?userName='+${topic.username}}">

                        <img th:if="${topic.avatarName != null}" th:src="@{'/readImg'+${topic.avatarName}}">

                        <img th:if="${topic.avatarName==null}" th:avatar="${topic.nikename}"/>



                    </a>
                </div>

                <div class="content clearfix">
                    <ul class="info">
                        <li>
                            <span class="tag" th:text="${topic.tagName}"></span>
                            <a class="userName" th:href="@{'/user/control/home?userName='+${topic.username}}">
                                <span th:text="${topic.nikename}"></span>
                            </a>

                            <!--                        <#if topic.isStaff>-->
                            <!--                        <span class="staff">官方人员</span>-->
                            <!--                    </#if>-->
                            <span class="postTime"
                                  th:text="'发表时间：'+${#dates.format(topic.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                            <span class="lastReplyTime" th:if="${topic.lastCommentTime!=null}"
                                  th:text="'最新回复：'+${#dates.format(topic.lastCommentTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                        </li>
                    </ul>
                    <h2 class="title clearfix">
                        <a th:href="'forum?topicId='+${topic.id}" th:text="${topic.title}">
                        </a>

                        <!--                <#list topic.hideTagTypeMap as key, value>-->
                        <!--                <span class="hideTagType hide_${key}" data="${key}">-->
                        <!--		                      			<#if value?c == 'true'>-->
                        <!--		                      				<span class="circle point"><i class="cms-unlock-solid" ></i></span>-->
                        <!--		                      			<#else>-->
                        <!--		                      				<span class="circle"><i class="cms-lock-solid" ></i></span>-->
                        <!--		                      			</#if>-->
                        <!--                </span>-->
                        <!--            </#list>-->
                    </h2>
                    <div class="clearfix"></div>

                    <div class="detail">
                        <div th:class="'tm-m-photos topic_thumbnail_'+${topic.id}"
                             th:if="${topic.imgUrl!=null and topic.imgUrl.size()>0}">
                            <ul class="tm-m-photos-thumb" >
                                <!-- 图片最多显示8张 -->
                                <li th:each="imageInfo:${topic.imgUrl}" th:data-src="${imageInfo}">
                                    <div class="img" th:style="'background-image: url('+${imageInfo}+')'"></div>
                                    <b class="tm-photos-arrow"></b></li>

                            </ul>
                            <div th:class="'tm-m-photo-viewer transition1 topic_original_'+${topic.id}">
                                <img th:src="@{'/static/images/null.gif'}">
                                <span th:class="'tm-m-photo-viewer-navleft navleft_'+${topic.id}"></span>
                                <span th:class="'tm-m-photo-viewer-navright navright_'+${topic.id}"></span>
                            </div>
                        </div>

                        <h2 class="summary" th:if="${topic.imgUrl!=null and topic.imgUrl.size()==0}"
                            th:text="${topic.reWriteContent}">

                        </h2>

                        <script th:inline="javascript">

                            $(function () {
                                new commentMove(".topic_thumbnail_" + /*[[${topic.id}]]*/ '', ".topic_original_" + /*[[${topic.id}]]*/ '', /*[[${topic.id}]]*/ '').init();
                            });

                        </script>
                    </div>
                </div>

                <div class="statistic clearfix">

                    <div class="viewTotal">
                        <i class="cms-view icon"></i>
                        <span th:text="${topic.viewNum}"></span>
                    </div>

                    <div class="commentTotal">
                        <i class="cms-commentCount icon"></i>
                        <span th:text="${topic.commentNum}"></span>
                    </div>
                </div>
            </div>

            <div th:if="${topicStat.last}" class="topicPage">

                <!--引入分页-->
                <div th:include="public/newPublic_1"></div>
            </div>
        </div>
    </div>
</div>

<style>
    /** 半透明提示层 **/
    .hideTag-class .layui-layer-content {
        background-color: rgba(0, 0, 0, 0.6);
    }

    .hideTag-class .layui-layer-content .layui-layer-TipsG {
        position: absolute;
        width: 0;
        height: 0;
        border-width: 5px;
        *overflow: hidden;

        border-style: dashed;
        border-color: rgba(0, 0, 0, 0.6) transparent transparent transparent;
        margin-bottom: -2px;
        margin-bottom: 3px \0;
        *margin-bottom: 3px;
    }

    .hideTag-class .layui-layer-content .layui-layer-TipsT {
        left: 7px;
        border-right-style: solid;
        border-right-color: rgba(0, 0, 0, 0.6);
    }
</style>



</script>
